<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>糖葫芦</title>
	</head>
	<body>
		<!-- 掘金看到的canvas写的糖葫芦 -->
		<canvas id="canvas" width="600" height="600"></canvas>
		<script>
			var can = document.getElementById('canvas');
			var context = can.getContext('2d');
			context.fillStyle = 'red';
			function drawCircle(x,y){
				context.beginPath();
				context.arc(x+80,y+80,45,0.2*Math.PI,false);
				context.closePath();
				context.fill();
			}
			for(var i=0; i<4; i++){
				drawCircle(200,20+i*80)
			}
			//糖葫芦的抓手
			context.fillStyle = '#d2af23'
			//x,y,宽，高
			context.fillRect(270,i*96,20,160)
			context.fillStyle = '#2c2c2c';
			//x,y,宽，高
			context.font = '28px serif';
			context.fillText("虎",270,i*28,160)
			context.fillStyle = '#2c2c2c';
			//x,y,宽，高
			context.fillText('虎',270,i*48,160)
			context.fillStyle = '#2c2c2c';
			//x,y,宽，高
			context.fillText('生',270,i*68,160)
			context.fillStyle= '#2c2c2c';
			//x,y,宽，高
			context.fillText('威',270,i*88,160)
		</script>
	</body>
</html>
